<template>
    <div class="ddd" ref="dddRef">
        <herders></herders>
        <MyBanner></MyBanner>
        <MyClass></MyClass>
        <CommodityList></CommodityList>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, onActivated , onDeactivated} from 'vue'
import herders from './herder.vue'
import MyBanner from './banner.vue'
import MyClass from './class.vue'
import CommodityList from './CommodityList.vue'
import { storeToRefs } from 'pinia'
// 导入 pinia
import { useProductStore } from '../stores/product'
const store = useProductStore()
const { homeScrollTop } = storeToRefs(store)
const dddRef = ref<HTMLElement | null>(null)

onMounted(() => {
    if (dddRef.value) {
        dddRef.value.scrollTop = homeScrollTop.value
    }

})
onActivated(() => {
    console.log(123);

})
onDeactivated(()=>{
    console.log('失效');
    
})
// 在去世的时候记录滚动条的位置
onBeforeUnmount(() => {
    if (dddRef.value?.scrollTop) {
        homeScrollTop.value = dddRef.value?.scrollTop
    }
})

</script>
<style scoped>
.ddd {
    height: 100vh;
    overflow: auto;
}
</style>